<template>
  <el-card class="card">
    <div>
      <el-col :span="12">
        <h5>Preserved|后台</h5>
        <el-menu
            class="el-menu-vertical-demo"
            default-active="1"
            @close="handleClose"
            @select="handleOpen">
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <template #title>公告</template>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-document"></i>
            <template #title>文章</template>
          </el-menu-item>
<!--          <el-menu-item disabled index="3">-->
<!--            <i class="el-icon-setting"></i>-->
<!--            <template #title>留言</template>-->
<!--          </el-menu-item>-->
<!--          <el-menu-item disabled index="4">-->
<!--            <i class="el-icon-setting"></i>-->
<!--            <template #title>评论</template>-->
<!--          </el-menu-item>-->
          <el-menu-item index="5">
            <i class="el-icon-setting"></i>
            <template #title>用户</template>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-setting"></i>
            <template #title>友链</template>
          </el-menu-item>
        </el-menu>
      </el-col>
      <div id="content">
        <!--        公告-->
        <div v-if="PathIndex==1">
          <h2>修改公告</h2>
          <el-input
              v-model="textarea"
              :rows="12"
              placeholder="请输入新的公告"
              type="textarea">
          </el-input>
          <div class="gongGao">
            <el-button type="primary" @click="setNotice">确认修改</el-button>
          </div>
        </div>

        <!--        文章审核-->
        <div v-if="PathIndex==2">
          <h2>文章审核</h2>
          <el-table
              :data="ExamineData"
              max-height="350"
              style="width: 100%">
            <el-table-column
                fixed
                label="标题"
                prop="articleTitle"
                width="150">
            </el-table-column>
            <el-table-column
                label="标签"
                prop="articleClassification"
                width="120">
            </el-table-column>
            <el-table-column
                label="摘要"
                prop="articleAbstract"
                width="500">
            </el-table-column>
            <el-table-column
                label="发表时间"
                prop="articleDate"
                width="120">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="120">
              <template #default="scope">
                <el-button
                    size="small"
                    type="text"
                    @click.prevent="setExamineRow(scope.$index, ExamineData)">
                  通过
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--        友联-->
        <div v-if="PathIndex==6">
          <div class="FriendBut">
            <el-button size="small" type="success" @click="centerDialogVisible='ture'">添加</el-button>
          </div>
          <el-table
              :data="FriendsData"
              style="width: 95%">
            <el-table-column
                label="日期"
                width="180">
              <template #default="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.userDate }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="名称"
                width="180">
              <template #default="scope">
                <i class="el-icon-user"></i>
                <span style="margin-left: 10px">{{ scope.row.userFriendsName }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="描述"
                width="220">
              <template #default="scope">
                <i class="el-icon-warning-outline"></i>
                <span style="margin-left: 10px">{{ scope.row.userStatus }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="地址"
                width="250">
              <template #default="scope">
                <i class="el-icon-house"></i>
                <span style="margin-left: 10px">{{ scope.row.userFriendsUrl }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.row)">编辑
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
              v-model="centerDialogVisible"
              center
              title="Friends信息"
              width="30%">
            <el-form v-model="friends" label-width="80px">
              <el-form-item label="名称">
                <el-input v-model="friends.userFriendsName"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="friends.userFriendsUrl"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <el-input v-model="friends.userImg"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="friends.userStatus"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
    <span class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addFriends">确 定</el-button>
    </span>
            </template>

          </el-dialog>
        </div>
        <!--        用户-->
        <div v-if="PathIndex==5">
          <h2>管理</h2>
          <el-table
              :data="userList"
              max-height="400"
              style="width: 95%">
            <el-table-column
                fixed
                label="用户名"
                prop="userPhone"
                width="150">
            </el-table-column>
            <el-table-column
                label="昵称"
                prop="userName"
                width="120">
            </el-table-column>
            <el-table-column
                label="邮箱"
                prop="userEmail"
                width="180">
            </el-table-column>
            <el-table-column
                label="权限"
                prop="userJurisdiction"
                width="90">
            </el-table-column>
            <el-table-column
                label="注册日期"
                prop="userRegistrationTime"
                width="600">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="120">
              <template #default="scope">
                <el-button
                    size="small"
                    type="text"
                    @click.prevent="UpdataRow(scope.$index, userList)">
                  {{ BtnName }}
                </el-button>
                <el-button
                    size="small"
                    type="text"
                    @click.prevent="deleteRow(scope.$index, userList)">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "Backstage",
  data() {
    return {
      BtnName: '设为管理员',
      friends: {},
      centerDialogVisible: false,
      textarea: '',
      PathIndex: 1,
      friendsIndex: 0,
      userdata: '',
      FriendsData: [],
      userList: {},
      ExamineData: [],
    }
  },
  created() {
    this.getuser();
    this.getFriend();
    this.getUserAll();
    this.getExamine();
  },
  methods: {
    setExamineRow(index, data) {
      this.$confirm('此操作将通过审核, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/articles/setExamine', data[index]).then((res) => {
          if (res.data.success) {
            this.$message.success(res.data.message);
            this.getExamine();
          } else {
            this.$message.warning(res.data.message);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消审核'
        });
      });
    },
    getExamine() {
      this.$axios.post('/articles/getExamine').then((res) => {
        if (res.data.success) {
          this.ExamineData = res.data.data;
        }
      })
    },
    getUserAll() {
      this.$axios.post('/user/getUserAll').then((res) => {
        if (res.data.success) {
          this.userList = res.data.data;
        }
      })
    },
    getuser() {
      this.token = localStorage.getItem("token");
      if (this.token != null) {
        this.$axios.post("/user/getuser", {userToken: this.token}).then((res) => {
          if (res.data.success) {
            this.userdata = res.data.data;
            if (this.userdata.userJurisdiction !== '管理员') {
              this.$router.go(-1);
              this.$message.warning({
                message: '没有权限使用后台管理，如需请联系管理员',
                type: 'warning'
              });
            }
          } else {
            this.$router.push('/blog/personal');
            this.$message.warning({
              message: res.data.message,
              type: 'warning'
            });
          }
        })
      } else {
        this.$router.push('/blog/personal');
        this.$message.warning({
          message: '请先登录',
          type: 'warning'
        });
      }
    },
    deleteRow(index, data) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/user/DelUserOne', data[index]).then((res) => {
          if (res.data.success) {
            this.getUserAll();
            this.$message.success(res.data.message);
          } else {
            this.$message.warning(res.data.message);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getFriend() {
      this.$axios.post('/friends/getFiends').then((res) => {
        if (res.data.success) {
          this.FriendsData = res.data.data;
        }
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/friends/delFiends', row).then((res) => {
          if (res.data.success) {
            this.getFriend();
            this.$message.success(res.data.message);
          } else {
            this.$message.warning(res.data.message);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    UpdataRow(index, data) {
      this.$confirm('确定设置' + data[index].userPhone + '为管理员？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/user/setUserJu', data[index]).then((res) => {
          if (res.data.success) {
            this.getUserAll();
            this.$message.success(res.data.message);
          } else {
            this.$message.warning(res.data.message);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消设置'
        });
      });
    },
    handleEdit(row) {
      this.centerDialogVisible = true;
      this.friends = row;
      this.friendsIndex = 1;
    },
    // 添加公告
    setNotice() {
      this.$axios.post('user/setNotice', {Notice: this.textarea}).then((res) => {
        if (res.data.success) {
          this.textarea = '';
          this.$message.success(res.data.message);
        } else {
          this.$message.warning(res.data.message);
        }
      })
    },
    handleOpen(res) {
      this.PathIndex = res;
    },
    addFriends() {
      if (this.friendsIndex != 1) {
        this.$axios.post('/friends/addFiends', this.friends).then((res) => {
          if (res.data.success) {
            this.friends = '';
            this.$message.success({
              message: res.data.message,
              type: 'success'
            });
            this.getFriend();
            this.centerDialogVisible = false;
          } else {
            this.$message.warning({
              message: res.data.message,
              type: 'warning'
            });
          }
        })
      } else {
        this.$axios.post('/friends/UpFiends', this.friends).then((res) => {
          if (res.data.success) {
            this.friendsIndex = 0;
            this.friends = '';
            this.centerDialogVisible = false;
            this.$message.success(res.data.message);
          } else {
            this.$message.warning(res.data.message);
          }
        })
      }
    },
  },
}
</script>

<style scoped>
#content {
  padding: 30px;
  margin-left: 100px;
}

.card {
  min-height: 600px;
}

.gongGao {
  text-align: right;
  margin-top: 30px;
}

.FriendBut {
  text-align: right;
}

.FriendsInout {
  margin-top: 10px;
}
</style>